<template>
	<view v-if="$store.state.userStore.userInfo.type == 1" class="page group-invite">
		<!-- <view class="search-bar">
			<uni-search-bar v-model="searchText" cancelButton="none" placeholder="输入好友昵称搜索"></uni-search-bar>
		</view> -->
		<view class="friend-items">
			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
				<!-- <view v-for="friend in friendItems" v-show="!searchText || friend.nickName.startsWith(searchText)"
					:key="friend.id">
					<view class="friend-item" @click="onSwitchChecked(friend)">
						<head-image :name="friend.nickName" 
							:online="friend.online" :url="friend.headImage"
							:size="100"></head-image>
						
						<view class="friend-name">{{ friend.nickName}}</view>
						<view class="friend-checked">
							<radio :checked="friend.checked" :disabled="friend.disabled" @click.stop="onSwitchChecked(friend)"/>
						</view>
					</view>
		
				</view> -->

				<next-tree :expandedKeys="['100']" :changeVerify="changeVerify" :title="getTitle" ref="nextTreeRef"
					:ifSearch=true expandedMode="singe" uiMode="page" :checkStrictly="checkStrictly" :selfMode="1"
					:selectParent="selectParent" funcMode="checkbox" :treeData="friends" @cancel="oncancel"
					@confirm="onconfirm">
					<!-- label插槽示意代码 -->
					<template #label="{data: {id, label, iconSrc, prev, post,userFlag}}">
						<view class="line-block">
							<!-- <image class="img" v-if="iconSrc" :src="iconSrc"></image> -->
							<view class="avatar-text" :style="avatarTextStyle" v-if="userFlag == 1">
								{{label.substring(0,1).toUpperCase()}}
							</view>
							<text space="nbsp" v-if="prev">{{prev}}&nbsp;</text><text>{{label}}</text><text space="nbsp"
								v-if="post">&nbsp;{{post}}</text>
						</view>
					</template>

				</next-tree>
			</scroll-view>
		</view>
		<!-- <view>
			<button type="primary" :disabled="inviteSize==0" @click="onInviteFriends()">邀请({{inviteSize}}) </button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				size: 60,
				textColor: "#ffffff",
				friends: [],
				groupId: null,
				searchText: "",
				groupMembers: [],
				friendItems: []
			}
		},
		methods: {
			onInviteFriends(list) {
				console.log("onInviteFriends===================================>>")
				let inviteVo = {
					groupId: this.groupId,
					friendIds: []
				}
				/* this.friendItems.forEach((f) => {
					if (f.checked && !f.disabled) {
						inviteVo.friendIds.push(f.id);
					}
				}) */
				console.log("onInviteFriends==>>" + JSON.stringify(list))
				list.forEach((f) => {
					//if (f.checked && !f.disabled) {
					inviteVo.friendIds.push(f.id);
					//}
				})
				if (inviteVo.friendIds.length > 0) {
					this.$http({
						url: "/group/invite",
						method: 'POST',
						data: inviteVo
					}).then(() => {
						uni.showToast({
							title: "邀请成功",
							icon: 'none'
						})
						setTimeout(() => {
							// 回退并刷新
							/* let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							prevPage.$vm.loadGroupMembers(); */
							this.loadGroupMembers(this.groupId);
							uni.navigateBack();
						}, 1000);

					})
				}
			},
			onShowUserInfo(userId) {
				uni.navigateTo({
					url: "/pages/common/user-info?id=" + userId
				})
			},
			onSwitchChecked(friend) {
				if (!friend.disabled) {
					friend.checked = !friend.checked;
				}
				console.log(this.inviteSize)
			},
			factorial(arr, friends) {
				console.log("friends:length:----------" + JSON.stringify(arr))

				//迭代
				arr.forEach(n => {
					//forEach循环
					let f = JSON.stringify(n)
					if (n.userFlag == "0" && f.includes('children')) {
						console.log("friends:length:,《《《《《《《《" + JSON.stringify(n))
						let newStr = n.children;
						console.log("friends:length:>>>>>>>>>>>>" + JSON.stringify(newStr))
						return this.factorial(newStr, friends)
					} else {
						let item = {
							id: n.id,
							headImage: n.headImage,
							nickName: n.nickName,
							online: n.online
						}
						item.disabled = this.isGroupMember(n.id);
						item.checked = item.disabled;
						this.friendItems.push(item);

						n.disabled = item.disabled;
						n.checked = item.disabled;
					}
				});
				this.friends = arr;
			},
			initFriendItems() {
				this.friendItems = [];
				let friend = this.$store.state.friendStore.friends;
				//对数据进行过滤处理
				let arrStr = JSON.stringify(friend);
				//依次修改对象中的每一个对象
				let str = arrStr.replaceAll('nickName', 'label');
				str = str.replaceAll('headImage', 'iconSrc');
				str = str.replace(/,"children":null/g, ''); //正则表达式去除
				console.log("friends:" + str)
				friend = JSON.parse(str);

				console.log("friends===::" + JSON.stringify(friend))
				console.log("friends:length:" + friend.length)
				this.factorial(friend, this.friendItems)

				/* friends.forEach((f => {
					if (f.delete) {
						return
					}
					let item = {
						id: f.id,
						headImage: f.headImage,
						nickName: f.nickName,
						online: f.online
					}
					item.disabled = this.isGroupMember(f.id);
					item.checked = item.disabled;
					this.friendItems.push(item);
				}))
				console.log("friendItems::" + JSON.stringify(this.friendItems)) */

			},
			loadGroupMembers(id) {
				this.$http({
					url: `/group/members/${id}`,
					method: "GET"
				}).then((members) => {
					this.groupMembers = members.filter(m => !m.quit);
					this.initFriendItems();
				})
			},

			isGroupMember(id) {
				return this.groupMembers.some(m => m.userId == id);
			},
			onconfirm: function(list) {
				uni.navigateBack({
					delta: 1
				});
				console.log('选中项的数量列表list：', list);
				console.log('选中项的数量列表list::::::::::：', JSON.stringify(list));

				this.onInviteFriends(list);

			},
			oncancel: function() {
				// 清除treeData的选中状态
				//this.checkedTreeData(this.treeData, []);
				// 跳转页面
				/* uni.navigateTo({
					url: "/pages/group/group-edit"
				}) */
				/* uni.switchTab({
					url: '/pages/index/index'
				}); */
				uni.navigateBack({
					delta: 2
				});

			},
		},
		computed: {
			inviteSize() {
				return this.friendItems.filter(f => !f.disabled && f.checked).length;
			},
			avatarTextStyle() {
				return `width: ${this.size}rpx;height:${this.size}rpx;
				color:${this.textColor};font-size:${this.size*0.4}rpx;`
			},
		},
		onLoad(options) {
			this.groupId = options.id;
			this.loadGroupMembers(options.id);
		}
	}
</script>

<style lang="scss" scoped>
	.group-invite {
		position: relative;
		border: #dddddd solid 1px;
		display: flex;
		flex-direction: column;

		.friend-items {
			position: relative;
			flex: 1;
			overflow: hidden;

			.friend-item {
				height: 120rpx;
				display: flex;
				margin-bottom: 1rpx;
				position: relative;
				padding: 0 30rpx;
				align-items: center;
				background-color: white;
				white-space: nowrap;

				.friend-name {
					flex: 1;
					padding-left: 20rpx;
					font-size: 30rpx;
					font-weight: 600;
					line-height: 60rpx;
					white-space: nowrap;
					overflow: hidden;
				}
			}

			.scroll-bar {
				height: 100%;
			}
		}
	}
</style>
<style lang="scss">
	.line-block {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.img {
			width: 40rpx;
			height: 40rpx;
			border-radius: 10rpx;
			margin: 0 20rpx;
		}
	}

	.avatar-text {
		background-color: #007aff;
		border-radius: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		margin-right: 10px;
	}
</style>